<template>
  <div id="app">
    <!--
      size: 列表的每一项有多高
      remain: 展示多少个
      variable: 表示高度不一定
    -->
<!--    <VirtualList :size="40" :remain="8" :items="items">-->
    <VirtualList :size="80" :remain="5" :items="items" :variable="true">
      <Item slot-scope="{item}" :item="item"></Item>
    </VirtualList>
  </div>
</template>

<script>
import Mock from 'mockjs';

import HelloWorld from './components/HelloWorld.vue'
import VirtualList from './components/virtual-list.vue';
import Item from './components/item.vue';

const items = [];
for (let i = 0; i < 10000; i++) {
  items.push({
    id: i,
    // value: i,

    /** 用于测试variable*/
    value: Mock.Random.sentence(5, 50)
  });
}

export default {
  name: 'App',
  components: {
    HelloWorld,
    VirtualList,
    Item
  },
  data() {
    return {
      items
    }
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
</style>
